<template>
  <a-modal
    destroyOnClose
    :title="title"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @ok="handleOk"
    @cancel="handleCancel">
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" :rules="validatorRules">
          <!-- 主表单区域 -->
          <a-form-model-item label='方案名称' prop='name'>
            <a-input v-model='model.name' :disabled='disableSubmit' />
          </a-form-model-item>
          <a-form-model-item label='上传方案'  prop='fileId'>
            <MeansUpload :isShow="disableSubmit" ref="fileUpload" :fileData="fileData" :file-url='fileUrl'
                         @returnFileId="(id)=>{ this.model.fileId = id }"
                         @removeFile="()=>{ this.model.fileId = '' }"
            ></MeansUpload>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import MeansUpload from '../../../components/MeansUpload'

export default {
  name: 'JeecgOrderMainModal',
  components: {
    MeansUpload
  },
  /*props: ['id', 'stage', 'type', 'typeName',
    {title: { type: String, default: '上传方案' }},
  ],*/
  props: {
    id: { type: [String, Number] },
    stage: { type: [String, Number] },
    type: { type: [String, Number] },
    typeName: { type: String },
    title: { type: String, default: '上传方案' },
  },
  data() {
    return {
      // title: '上传方案',
      visible: false,
      model: {
        name: '',
        fileId: ''
      },
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
       /* fileId: [
          { required: true, message: '请上传文件', trigger: 'blur' }
        ]*/
      },
      isCheck: false,
      url: {
        add: '/sys/common/sjFaImport',
        edit: '/sys/common/editSjFaImport',
        sjFaImport: '/sys/common/sjFaImport'
      },
      fileUrl: {
        saveFile: '/sys/common/sjUpload'
      },
      fileData: {}
    }
  },
  methods: {
    add() {
      this.model = {}
      this.visible = true
      this.fileData = {}
    },
    check(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.fileData = Object.assign({}, record)
    },
    edit(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.fileData = Object.assign({}, record)
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },
    // 保存数据
    saveData() {
      let httpurl, method, param
      if (!this.model.id) {
        httpurl = this.url.add
        method = 'post'
        param = {
          proid: this.id,
          type: this.typeName,
          ...this.model
        }
      } else {
        httpurl = this.url.edit
        method = 'post'
        param = {
          id: this.model.id,
          proid: this.id,
          type: this.typeName,
          ...this.model
        }
      }
      httpAction(httpurl, param, method).then((res) => {
        this.confirmLoading = false
        if (res.success) {
          this.$emit('ok')
          this.visible = false
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleOk() {
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if(!this.model.fileId){
            this.$message.error('请上传文件')
          }else{
            this.confirmLoading = true
            this.saveData()
          }
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../../css/checkForm.less';
</style>
<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0;
}

/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0;
}
</style>
